{% extends "base.html" %}

{% block title %}Inspects{% endblock %}

{% block navbar %}
<section class="content-header">
    <h1>Inspects</h1>
    <ol class="breadcrumb">
        <li><i class="fa fa-dashboard"></i> 当前位置</li>
        <li class="active">容器状态</li>
        <li class="active">Inspects</li>
    </ol>
</section>
{% endblock %}

{% block content %}
<style>
        pre {outline: 1px solid #ccc; padding: 5px; margin: 5px; }
        .string { color: green; }
        .number { color: darkorange; }
        .boolean { color: blue; }
        .null { color: magenta; }
        .key { color: red; }
</style>
<div class="row">
    <span class="pull-left"><i class="fa fa-file-alt"></i> 
        容器元数据
    </span>
    <span class="pull-right">

    </span>
</div>
<div class="widget-body">
<pre class="log_viewer wrap_lines" force-glue="" id='view-json'>
    {{inspect}}
</pre>
</div>
{% endblock %}

{% block scripts %}
<script>
$('#view-json').html(JsonFormat());

function JsonFormat() {
    var jtext = $('#view-json').text();
    var jj = JSON.parse(jtext);
    json = JSON.stringify(jj,undefined,2);
    son = json.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>');
		return json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function (match) {
			 var cls = 'number';
			 	if (/^"/.test(match)) {
			 			if (/:$/.test(match)) {
			 				cls = 'key';
			 			} else {
			 				cls = 'string';
			 			}
			 	} else if (/true|false/.test(match)) {
			 		cls = 'boolean';
			 	} else if (/null/.test(match)) {
			 		cls = 'null';
			 	}
			 	return '<span class="' + cls + '">' + match + '</span>';
		 });
}
</script>
{% endblock %}